<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg">
			<image :src="item.pic" mode="aspectFill" lazy-load></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-info grace-padding">
			<view class="title grace-flex">
				<image :src="item.pic" mode="widthFix" lazy-load></image>
				<text class="grace-black grace-flex1">#{{item.title}}#</text>
			</view>
			<view class="count grace-flex grace-h6">
				<text>动态 {{item.totalNum}}</text>
				<text style="margin-left: 20rpx;">今日 {{item.todayNum}}</text>
			</view>
			<view class="grace-black9 grace-h5" style="line-height: 50rpx;">{{item.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus" scoped>
.topic-bg
	width 100%
	height 300rpx
	position relative
	overflow hidden
	image
		width 100%
		position absolute
		filter blur(10px)
.topic-info
	.title
		position relative
		image
			width 180rpx
			height 180rpx
			border-radius 20rpx
			position absolute
			top -90rpx
		text
			margin-top 5rpx
			font-size 40rpx
			margin-left 200rpx
	.count
		padding 50rpx 0 20rpx 0
		color #CDCDCD
</style>